<template>
  <div class="gameDetail">
    <div class="detail_header">
      <top-bar :barObj="barObj"/>
    </div>
    <div class="content contentOne">
      <div class="arrow-up"></div>
      <div class="icon-img">
        <img src="../../assets/img/003.png" alt>
      </div>
      <div class="content-user">
        <div class="name">绝地求生-刺激战场</div>
        <div class="txt">正版吃鸡，激情一夏</div>
        <div class="num">
          <span class="person">8.7万人 在玩</span>
          <span class="mb">32.5MB</span>
        </div>
        <div class="btn">
          <div class="psBtn">60000PS</div>
          <i class="iconfont icon-gengduomore12"></i>
        </div>
      </div>
      <div class="star">
        <img src="./img/stars1.png" alt>
        <img src="./img/stars1.png" alt>
        <img src="./img/stars1.png" alt>
        <img src="./img/stars2.png" alt>
        <img src="./img/stars2.png" alt>
        <div class="txt">猥琐发育，别浪</div>
      </div>
    </div>
    <div class="content contentTow">
      <div class="title">
        新功能
        <span>版本历史记录</span>
      </div>
      <div class="versions">
        1.2版本
        <span>两周前</span>
      </div>
      <div class="tit">【版本更新内容】</div>
      <div class="titTxt">
        全面开放新的玉林地图，玩家可以在地图上随机匹配
        <span>更 多</span>
      </div>
      <div class="preview">预览
        <ul>
          <li>
            <img src="../../assets/img/banner.png" alt>
          </li>
        </ul>
      </div>
    </div>
    <div class="content contentThree">
      <p>新功能</p>
      <p class="grade">
        轻点评分：
        <span>
          <img src="./img/stars1.png" alt>
          <img src="./img/stars1.png" alt>
          <img src="./img/stars2.png" alt>
          <img src="./img/stars2.png" alt>
          <img src="./img/stars2.png" alt>
        </span>
      </p>
      <div class="main">
        <div class="name">
          我的名字叫king
          <span>22小时前</span>
        </div>
        <div class="stars">
          <img src="./img/stars1.png" alt>
          <img src="./img/stars1.png" alt>
          <img src="./img/stars1.png" alt>
          <img src="./img/stars1.png" alt>
          <img src="./img/stars1.png" alt>
        </div>
        <div class="wz">
          奥斯卡级都发神经的股份静安寺，等哈说讲得好，大吼大叫爱神的箭啊
          打好坚实的就看，等数据库灰色空间发货的会计师，辅导教师开好房跨
          说困了江哈会计法哈开，奖号分开喝发卡机浩丰.科技啊哈科技发货看见
          的会计师副科级的说法。
          哈是否会贺卡给发货就按个，暗示法建行卡。
          睡觉啊规范和骄傲过回房间噶几是，发的少家伙很放得开健身房发送到
        </div>
        <p class="write">撰写评论</p>
      </div>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
export default {
  name: "gameDetail",
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "游戏",
        title: "绝地吃鸡",
        isIcon: true
      }
    };
  },
  components: {
    topBar
  }
};
</script>
<style lang="stylus" scoped>
.gameDetail {
  width: 7.5rem;
  margin: 0 auto;

  .detail_header {
    padding-top: 0.54rem;
    box-sizing: border-box;
    height: 2.33rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
  }

  .content {
    width: 7.1rem;
    background: #FFF;
    border-radius: 0.2rem;
    box-sizing: border-box;
    padding: 10px;
    margin: 0 auto;
    position: relative;
  }

  .contentOne {
    height: 3.68rem;
    top: -40px;
    display: flex;

    .arrow-up {
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 8px solid #fff;
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
    }

    .icon-img {
      width: 1.79rem;
      height: 1.89rem;
      border-radius: 5px;
      overflow: hidden;
      flex: 0 1 1.79rem;
      margin-right: 0.15rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .content-user {
      flex: 1;
      height: 1.5rem;

      .name {
        color: rgba(0, 0, 0, 1);
        margin: 5px 0;
        font-size: 16px;
      }

      .txt {
        color: #9B9B9B;
        margin: 10px 0;
        font-size: 11px;
      }

      .num {
        font-size: 11px;

        .person {
          color: #EF8F2C;
        }

        .mb {
          color: #90D014;
          margin-left: 10px;
        }
      }

      .btn {
        margin: 10px 0;

        .psBtn {
          line-height: 0.53rem;
          background: linear-gradient(-90deg, rgba(201, 43, 246, 1), rgba(233, 114, 255, 1));
          border-radius: 0.22rem;
          color: #fff;
          display: inline-block;
          padding: 0.1rem;
        }

        .iconfont {
          float: right;
          color: #FFE051;
          font-size: 30px;
          margin-top: 5px;
        }
      }
    }

    .star {
      width: 100%;
      position: absolute;
      bottom: 8px;
      left: 20px;

      img {
        width: 0.33rem;
        height: 0.32rem;
      }

      .txt {
        color: rgba(155, 155, 155, 1);
        font-size: 11px;
        margin: 6px 0;
      }
    }
  }

  .contentTow {
    height: 6.8rem;
    top: -30px;

    .title {
      font-size: 16px;
      line-height: 0.31rem;

      span {
        float: right;
        font-size: 13px;
        color: rgba(16, 137, 255, 1);
      }
    }

    .versions {
      font-size: 11px;
      color: #9B9B9B;
      margin: 10px 0;

      span {
        float: right;
      }
    }

    .tit {
      font-size: 11px;
    }

    .titTxt {
      font-size: 11px;
      margin: 10px 0;

      span {
        color: #1089FF;
        float: right;
      }
    }

    .preview {
      font-size: 16px;
      margin-top: 25px;

      ul {
        li {
          height: 3.5rem;
          width: 6.24rem;
          background: pink;
          margin-top: 20px;
          border-radius: 15px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .contentThree {
    height: 6rem;
    top: -20px;

    p {
      line-height: 0.5rem;
    }

    .grade {
      clear: #9B9B9B;
      font-size: 11px;

      span {
        float: right;

        img {
          width: 0.33rem;
          height: 0.32rem;
        }
      }
    }

    .main {
      // width: 686px;
      height: 3.43rem;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 15px;
      margin: 15px 0;
      font-size: 11px;
      padding: 10px;
      box-sizing: border-box;

      .name {
        color: #EF8F2C;

        span {
          float: right;
          color: #9B9B9B;
        }
      }

      .stars {
        img {
          width: 0.24rem;
          height: 0.24rem;
          margin: 5px;
        }
      }

      .wz {
        line-height: 0.35rem;
      }

      .write {
        color: #006AEE;
        margin: 18px 0;
      }
    }
  }
}
</style>

